﻿@{
    ViewData["Title"] = "标签管理";
}
<i-table border :columns="columns" :data="tags"></i-table>
<Modal title="编辑标签"
       v-model="isEdit"
       @@on-ok="onSave"
       :mask-closable="false">
    <i-form :model="tag" ref="tag" :rules="ruleValidate" :label-width="60">
        <form-item label="标签" prop="title">
            <i-input v-model="tag.name" placeholder="请输入标签名称..."></i-input>
        </form-item>
    </i-form>
</Modal>
@section Scripts
{
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isEdit: false,
                tag: { name: '', origin: '' },
                ruleValidate: {
                    name: [
                        { required: true, message: '标签不能为空', trigger: 'blur' },
                        { type: 'string', max: 60, message: '最多不能超过60个字符', trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        title: '标签',
                        key: 'tagName'
                    },
                    {
                        title: '数量',
                        key: 'useCount',
                        width: 150
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            app.edit(params.index);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            app.remove(params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                tags: []
            },
            mounted: function () {
                this.get();
            },
            methods: {
                get() {
                    axios.get('/Admin/Blog/GetTags')
                        .then(function (response) {
                            app.tags = response.data;
                        })
                        .catch(function (err) {
                            app.$Message.error(err);
                        });
                },
                edit(index) {
                    this.isEdit = true;
                    this.tag.name = this.tag.origin = this.tags[index].tagName;
                },
                remove(index) {
                    axios.get('/Admin/Blog/DeleteTag', { params: { name: this.tags[index].tagName } })
                        .then(function (response) {
                            app.tags.splice(index, 1);
                        })
                        .catch(function (err) {
                            app.$Message.error(err);
                        });
                },
                onSave() {
                    axios.post('/Admin/Blog/UpdateTag', this.tag)
                        .then(function (response) {
                            app.isEdit = false;
                            app.get();
                        })
                        .catch(function (err) {
                            app.$Message.error(err);
                        });
                }
            }
        });
    </script>
}

